<template>
	<view class="page-view flex flex-direction">
		<cu-custom ref="cuCustom" :isBack="true">
			<template slot="backText">
				返回
			</template>
		</cu-custom>
		<view class="flex-sub main">
			<mescroll-uni @init="mescrollInit" @down="downCallback" @up="upCallback" :fixed="false" ref="mescrollRef">
				<view class="list">
					<view @tap="viewDetails(item)" class="item flex align-center" v-for="(item, index) in schoolList" :key="index">
						<view class="line"></view>
						<view class="flex-sub">
							<view class="name">{{ item.schoolName }}</view>
							<view class="tag">{{ item.majorCode }}</view>
						</view>
						<view class="more">查看详情>></view>
					</view>
				</view>
			</mescroll-uni>
		</view>
	</view>
</template>

<script>
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
export default {
	data() {
		return {
			majorCode: '',
			areaCode: '',
			schoolList: []
		};
	},
	mixins: [MescrollMixin],
	onLoad(options) {
		console.log(options);
		this.majorCode = options.major;
		this.areaCode = options.area;
		// this.getSchools();
	},
	methods: {
		upCallback() {
			this.getSchools();
		},
		getSchools() {
			let pageNum = this.mescroll.num;
			let pageSize = this.mescroll.size;
			this.$postajax(this.$api.getSchools, {
				majorCode: this.majorCode,
				areaCode: this.areaCode,
				pageNum: pageNum,
				pageSize: pageSize
			})
				.then(da => {
					if (da.code == 200) {
						if (this.mescroll.num == 1) this.schoolList = [];
						if (da && da.data && da.data.records && da.data.records.length > 0) {
							let curPageData = da.data.records.map(item => {
								return {
									id: item.id,
									schoolName: item.schoolName,
									majorCode: item.majorCode,
									dispensingDetail: item.dispensingDetail
								};
							});
							this.mescroll.endBySize(curPageData.length, da.total);
							this.schoolList = this.schoolList.concat(curPageData);
						} else {
							this.mescroll.endSuccess(0, false);
						}
					}
				})
				.catch(e => {
					if (this.mescroll.num == 1) this.schoolList = [];
					this.mescroll.endSuccess(0, false);
				});
		},

		viewDetails(item) {
			uni.navigateTo({
				url: '/pages/school/school?id=' + item.id
			});
		}
	}
};
</script>

<style scoped lang="less">
.page-view {
	height: 100vh;
}
.bg {
	display: block;
	width: 100%;
}
.top-wrap {
	position: relative;
	.title-name {
		position: absolute;
		line-height: 130upx;
		bottom: 0;
		text-align: center;
		left: 0;
		right: 0;
		color: #fff;
		font-weight: bold;
		font-size: 46upx;
		text {
			background-image: -webkit-linear-gradient(top, #fff, #f4b573);
			-webkit-background-clip: text;
			color: transparent;
		}
	}
}
.main {
	height: 0;
	overflow: auto;
}
.list {
	margin-top: 10upx;
	.item {
		background: #fff;
		font-size: 33upx;
		color: #020202;
		padding: 17upx 66upx 17upx 16upx;
		margin-bottom: 8upx;
		.line {
			width: 15upx;
			height: 86upx;
			background: #da6554;
			margin-right: 45upx;
		}

		.tag {
			color: #fff;
			font-size: 24upx;
			display: inline-block;
			background: #da6554;
			line-height: 32upx;
			padding: 0 13upx;
			border-radius: 20upx;
		}
		.more {
			font-size: 26upx;
			color: #da6554;
		}
	}
}
</style>
